import QtQuick 2.0

Item {
    width: 332
    height: 332
    property real currentAngle: 0
    property string bgImgSource: "qrc:/grader/imgs/compass_bg.png"
    property real radius: 125

    Canvas{
        id: canvas
        anchors.fill: parent
        contextType: "2d";
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset()

            ctx.save()
            ctx.drawImage(bgImgSource, 0, 0)
            ctx.restore()

            ctx.save()
            ctx.translate(canvas.width/2, canvas.height/2+10)
            ctx.fillStyle = "white"
            ctx.font = "36px Aldrich"
            ctx.textAlign = "center"
            ctx.fillText("N" , radius * Math.sin(currentAngle/180*Math.PI), -radius * Math.cos(currentAngle/180*Math.PI))
            ctx.fillText("E" , radius * Math.cos(currentAngle/180*Math.PI), radius * Math.sin(currentAngle/180*Math.PI))
            ctx.fillText("S" , -radius * Math.sin(currentAngle/180*Math.PI), radius * Math.cos(currentAngle/180*Math.PI))
            ctx.fillText("W" , -radius * Math.cos(currentAngle/180*Math.PI), -radius * Math.sin(currentAngle/180*Math.PI))
            ctx.font = "66px Aldrich"
            if(currentAngle < 5 && currentAngle > -5){
                ctx.fillText("北" , 0, 10)
            }else if(currentAngle >= 5 && currentAngle <= 85){
                ctx.fillText("东北" , 0, 10)
            }else if(currentAngle > 85 && currentAngle < 95){
                ctx.fillText("东" , 0, 10)
            }else if(currentAngle >= 95 && currentAngle <= 175){
                ctx.fillText("东南" , 0, 10)
            }else if(currentAngle > 175 && currentAngle < 185){
                ctx.fillText("南" , 0, 10)
            }else if(currentAngle >= 185 && currentAngle <= 265){
                ctx.fillText("西南" , 0, 10)
            }else if(currentAngle > 265 && currentAngle < 275){
                ctx.fillText("西" , 0, 10)
            }else if(currentAngle >= 275 && currentAngle <= 355){
                ctx.fillText("西北" , 0, 10)
            }

            ctx.restore()
        }
        onImageLoaded: requestPaint()
        Component.onCompleted: {
            loadImage(bgImgSource)
        }
    }

    onCurrentAngleChanged: {
        if(currentAngle >360)currentAngle = 0
        canvas.requestPaint()
    }
}
